<template>
  <div class="vipChange">
    <el-collapse v-model="activeNames1">
      <el-collapse-item title="内容样式" name="1">
        <ul class="content-list">
          <li>
            <span>背景：</span>
            <div>
              <div>
                <el-radio v-model="styles.bgType" label="1">颜色</el-radio>
                <el-radio v-model="styles.bgType" label="2">背景图片</el-radio>
              </div>
              <div class="content-bg">
                <ul class="content-list">
                  <li v-if="styles.bgType==1">
                    <span>背景颜色：</span>
                    <div>
                      <colorSetting
                        v-model="styles.colorBg"
                        :originColor="styles.colorBg"
                        initColor="#FF3C29"
                      ></colorSetting>
                    </div>
                  </li>
                  <li v-if="styles.bgType==2">
                    <span>背景图片：</span>
                    <div>
                      <upLoadImage :v="styles" :height="50"></upLoadImage>
                      <p style="font-size:10px;color:#999">建议图片尺寸为750x280像素。</p>
                    </div>
                  </li>
                </ul>
              </div>
            </div>
          </li>
          <li>
            <span>昵称颜色：</span>
            <div>
              <colorSetting
                v-model="styles.colorName"
                :originColor="styles.colorName"
                initColor="#fff"
              ></colorSetting>
            </div>
          </li>
          <li>
            <span>财务按钮：</span>
            <div>
              <el-checkbox v-model="styles.btnStatus[0]">余额</el-checkbox>
              <el-checkbox v-model="styles.btnStatus[1]">积分</el-checkbox>
              <el-checkbox v-model="styles.btnStatus[2]">优惠券</el-checkbox>
              <el-checkbox v-model="styles.btnStatus[3]">收藏</el-checkbox>
            </div>
          </li>
          <li>
            <span>会员按钮：</span>
            <div>
              <el-radio v-model="styles.vipStatus" label="1">开启</el-radio>
              <el-radio v-model="styles.vipStatus" label="2">关闭</el-radio>
            </div>
          </li>
          <li>
            <span>财务样式：</span>
            <div>
              <div class="content-bg">
                <ul class="content-list">
                  <li>
                    <span style="width:120px">数字颜色：</span>
                    <div>
                      <colorSetting
                        v-model="styles.colorNumber"
                        :originColor="styles.colorNumber"
                        initColor="#212121"
                      ></colorSetting>
                    </div>
                  </li>
                  <li>
                    <span style="width:120px">标题颜色：</span>
                    <div>
                      <colorSetting
                        v-model="styles.colorTitle"
                        :originColor="styles.colorTitle"
                        initColor="#212121"
                      ></colorSetting>
                    </div>
                  </li>
                  <!-- <li>
                    <span style="width:120px">分割线颜色：</span>
                    <div>
                      <colorSetting
                        v-model="styles.colorBorder"
                        :originColor="styles.colorBorder"
                        initColor="#eee"
                      ></colorSetting>
                    </div>
                  </li> -->
                </ul>
              </div>
            </div>
          </li>
        </ul>
      </el-collapse-item>
    </el-collapse>



  </div>
</template>

<script>
import { mapState, mapMutations } from "vuex";
import colorSetting from "../../comm/colorSetting";
import upLoadImage from "../../comm/upLoadImage";
export default {
  name: "vipChange",
  data() {
    return {
      activeNames1: "1",
    };
  },
  computed: {
    ...mapState(["list", "currentId", "currentName"]),
    styles() {
      return this.list[this.currentId].styles;
    },
  },
  components: {
    colorSetting,
    upLoadImage,
  },
};
</script>


<style lang='less' scoped>
@import url("../../../assets/css/base.less");
.content-bg {
  background-color: #f7f7f7;
  padding: 10px;
  margin-top: 10px;
}
</style>
